<template>
  <div>
    <el-menu
    class="menu global-menu"
    mode="horizontal"
    :ellipsis="false"
    :default-active="currentRoute"
  >
      <img
        style="width: 100px"
        src="/images/element-plus-logo.svg"
        alt="Element logo"
      />
    <el-menu-item @click="handleMenuClick(item.path)" v-for="item in filteredRoutes" :index="item.name" :key="item.name">{{ item.name }}</el-menu-item>
    <div class="anNiu">
      <el-button-group>
        <el-button class="bu" text @click="handleLogin"> 登录 </el-button>
        <el-button class="bu" text @click="handleRegister"> 注册 </el-button>
      </el-button-group>
     
    </div>
  </el-menu>
  </div>
</template>

<style scoped>
.logo {
  width: 40px;
  height: 40px;
}
.anNiu{
 margin-left: auto;
 display: flex;
 align-items: center;
 height: 100%;
}
.menu{
  width: 100%;
  height: 68px;
  --el-menu-bg-color: #1d2636;
}
 .bu{
  --el-button-text-color: #f8fbffad;
  font-size: 19px ;
  font-weight: bold;
 }
 .global-menu .el-menu-item{
  --el-menu-text-color: #f8fbffad;
  font-size: 19px ;
  font-weight: bold;
  transition: none !important;
  --el-menu-hover-text-color: #ffffff ;
  --el-menu-hover-bg-color: transparent;
 }
 .global-menu .el-menu-item:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}
 .global-menu :deep(.el-menu-item.is-active){
  border-bottom: none;
  color: #ffffff !important;
  font-weight: bold;
  background-color: transparent !important;
 }
 .global-menu :deep(.el-menu--horizontal.el-menu) {
    border-bottom: none;
}
</style>

<script setup>
import { routes } from "@/router/router";
import { useRouter, useRoute } from "vue-router";
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

//过滤菜单
const filteredRoutes = computed(() => {
  return routes.filter(route => !route.meta?.hideInMenu);
});

// 计算当前激活的菜单项
const currentRoute = computed(() => {
  const currentPath = route.path;
  // 找到最匹配的路由
  const currentMenuItem = filteredRoutes.value.reduce((best, current) => {
    if (currentPath.startsWith(current.path) && (!best || current.path.length > best.path.length)) {
      return current;
    }
    return best;
  }, null);
  return currentMenuItem?.name || '';
});

const handleMenuClick = (path) => {
  router.push({ path: path });
};

const handleLogin = () => {
  router.push('/login');
};

const handleRegister = () => {
  router.push('/login');
};
</script>
